<template>
    <y-calendar :events="events" @dateClick="dateClick" @eventClick="eventClick" displayEventEnd :eventContent="eventContent"></y-calendar>
</template>

<script setup lang="ts">
    import { EventItem } from '../../components/calendar/src/types'
    import { DateClickArg } from '@fullcalendar/interaction'
    import {EventClickArg, EventContentArg} from '@fullcalendar/core'
    let events = ref<EventItem[]>([
        {
            title: '购物',
            start: '2023-07-11 10:00:00',
            end: '2023-07-11 12:00:00',
            editable: true
        },
        {
            title: '学习',
            start: '2023-07-15 08:00:00',
            end: '2023-07-15 16:00:00'
        }
    ])

    const dateClick = (info: DateClickArg) => {
        console.log(info)
        events.value.push(
            {
                title: '学习',
                start: info.dateStr + ' 08:00:00',
                end: info.dateStr + ' 12:00:00'
            }
        )
        console.log(events.value)
    }
    const eventClick = (info: EventClickArg) => {
        console.log(info)
    }
    const eventContent = (arg: EventContentArg) => {
        let el = document.createElement('div')
        let timeTextArr = arg.timeText.split('-')
        let start = ''
        let end = ''
        if (timeTextArr && timeTextArr.length > 0 && timeTextArr[0] !== '') {
            start = timeTextArr[0].replace('上午','').replace('下午','').replace('时','点')
            end = timeTextArr[1] && timeTextArr[1].length ? timeTextArr[1].replace('上午','').replace('下午','').replace('时','点') :''
        }
        let endText = ''
        if (end !== '') {
            endText = `—结束时间: ${end}`
        }
        el.innerHTML = `
                        <div>开始时间: ${start}${endText}</div>
                        <div>标题： ${arg.event._def.title}</div>
                    `
        return {
            domNodes: [el]
        }
    }
</script>

<style scoped>

</style>
